<template>
	<view class="fruit-order-body-container" :style="{'minHeight':windowHeight+'px'}">
		<view class="fruit-order-item" v-for="(item,index) in data.fruitOrderList" :key="index">
			<view class="fruit-order-user-part">
				<view class="fruit-order-name-call">
					<view class="fruit-order-user-name">
						<text>{{item.fruitOrderMain.receiver_name}}</text>
					</view>
					<image src="../static/fruit/phone-call.png" mode="aspectFit" @tap="phoneCall(index)"></image>
				</view>
				<view class="fruit-order-user-address">
					{{item.fruitOrderMain.receiver_address}}
				</view>
			</view>
			<view class="fruit-order-mention-part">
				<view class="fruit-order-mention-item">
					<view class="fruit-order-mention-text">备注</view>
					<view class="fruit-order-mention-value">{{item.fruitOrderMain.mention}}</view>
					<!-- <view class="fruit-order-mention-value">11111111111111111111111111111111111111111111111111111111111111</view> -->
				</view>
				<view class="fruit-order-mention-item">
					<view class="fruit-order-mention-text">餐具</view>
					<view class="fruit-order-mention-value">{{item.fruitOrderMain.chopsticks}}</view>
				</view>
			</view>
			<view class="fruit-order-shop-part">
				<view class="fruit-order-shop-item-container" >
					<view class="fruit-order-shop-item" v-for="(fItem,fIndex) in item.fruitOrderComplexTypeList" :key="fIndex">
						<view class="fruit-order-shop-title">{{fItem.title}}</view>
						<view class="fruit-order-shop-count">x{{fItem.product_num}}</view>
						<view class="fruit-order-shop-price">{{fItem.unit_price}}</view>
					</view>
				</view>
				<view class="fruit-order-shop-wholeprice">
					<text style="font-size: 28rpx; font-weight: normal;">总金额 ￥</text>{{item.fruitOrderMain.total_price}}
				</view>
			</view>
			<view class="fruit-order-shop-btn-container">
				<button style="background-color: #DE6868;" @tap="refuseOrder(index)">拒绝订单</button>
				<button style="background-color: #9BCDD2;" @tap="acceptOrder(index)">接受订单</button>
			</view>
		</view>
	</view>
	
	<tabBar currentTab="shop"></tabBar>
</template>

<script>
	import tabBar from '@/components/tabbar/tabbar.vue'
	import {onMounted, reactive} from 'vue'
	import global from '../../config/global.js'
	export default {
		name:'fruit-order',
		components:{
			tabBar
		},
		setup(){
			let data = reactive({
				fruitOrderList:[]
			})
			
			let windowHeight = uni.getSystemInfoSync()['windowHeight'];
			
			onMounted(()=>{
				uni.request({
					url:global.BASE_URL+'/fruitOrder/getFruitOrder/valid',
					method:"GET",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						if(res.data.code){
							data.fruitOrderList = res.data.data
							console.log(res.data.data)
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			})
			
			function phoneCall(i){
				uni.makePhoneCall({
					phoneNumber:data.fruitOrderList[i].fruitOrderMain.receiver_phone+'',
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			function refuseOrder(i){
				
			}
			
			function acceptOrder(i){
				
			}
			
			return {
				data,
				windowHeight,
				
				phoneCall
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.fruit-order-body-container{
		width: 730rpx;
		padding: 10rpx;
		background-color: #efefef;
		overflow: scroll;
		padding-bottom: 175rpx;
		
		
		& .fruit-order-item{
			width: 660rpx;
			margin: 20rpx 20rpx;
			padding: 15rpx 15rpx;
			background-color: white;
			border-radius: 20rpx;
			
			& .fruit-order-user-part{
				width: 640rpx;
				padding: 0rpx 10rpx 10rpx 10rpx ;
				border-bottom : 2rpx solid #888888;
				
				& .fruit-order-name-call{
					height: 80rpx;
					display: flex;
					justify-content: space-between;
					
					& .fruit-order-user-name{
						font-size: 40rpx;
						font-weight: bold;
						height: 80rpx;
						line-height: 80rpx;
					}
					
					& image{
						width: 50rpx;
						height: 50rpx;
						margin-top: 15rpx;
					}
				}
				
			}
			
			& .fruit-order-mention-part{
				width: 640rpx;
				padding: 5rpx 10rpx 10rpx 10rpx ;
				border-bottom : 2rpx solid #888888;
				
				& .fruit-order-mention-item{
					display: flex;
					margin: 10rpx 0rpx;
					
					& .fruit-order-mention-text{
						width: 100rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 30rpx;
						border-radius: 100rpx;
						text-align: center;
						background-color: #f2e6ce;
						color: #fca106;
					}
					
					& .fruit-order-mention-value{
						width: 520rpx;
						margin-left: 20rpx;
						word-wrap: break-word;
						line-height: 40rpx;
						font-size: 30rpx;
					}
				}
				
			}
			
			& .fruit-order-shop-part{
				width: 640rpx;
				padding: 5rpx 10rpx 10rpx 10rpx ;
				border-bottom : 2rpx solid #888888;
				
				& .fruit-order-shop-wholeprice{
					width: 100%;
					text-align: right;
					font-size: 45rpx;
					font-weight: bold;
				}
				
				& .fruit-order-shop-item-container{
					margin: 5rpx 0;
					border-bottom: 2rpx solid #cdcdcd;
					
					& .fruit-order-shop-item{
						position: relative;
						display: flex;
						
						& .fruit-order-shop-title{
							width: 450rpx;
							line-height: 50rpx;
							word-wrap: break-word;
							font-weight: bold;
						}
						
						& .fruit-order-shop-price{
							position: absolute;
							right: 10rpx;
							line-height: 50rpx;
							height: 50rpx;
							text-align: right;
						}
						
						& .fruit-order-shop-count{
							padding: 0rpx 5rpx;
							height: 38rpx;
							line-height: 40rpx;
							margin-top: 6rpx;
							border: 2rpx solid #888888 ;
							text-align: center;
							border-radius: 10rpx;
							font-size: 26rpx;
						}
						
					}
					
				}
				
			}
			
			& .fruit-order-shop-btn-container{
				width: 640rpx;
				padding: 5rpx 10rpx 10rpx 10rpx ;
				border-bottom : 2rpx solid #888888;
				display: flex;
				
				& button{
					width: 280rpx;
					height: 70rpx;
					line-height: 70rpx;
					margin: 20rpx 40rpx;
					color: white;
				}
			}
			
		}
	}
</style>
